<template>
    <div class="inventoryAlerts-box">
        <!-- 库存预警 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
 
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals"  :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            @updatePage="updatePage" @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData"
            :tableData="inventoryTableData" :stockroomNumber="stockroomNumber">
        </forTableCom>
    </div>

</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { querySelectWarningApi } from '@/api/inventory';
import { ref } from 'vue'

const idActive = 'productsOrder'
// 表单
let inventoryForm = ref(
    {
        warehouseName: '',  // 仓库名称
        productsOrder: '',  // 产品编号
        productName: ''     // 存货名称
    }
)
// 控制预警显示
const stockroomNumber = ref(true)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'warehouseName',
        label:'仓库名称'
    },
    {
        name: 'productsOrder',
        label:'产品编号'
    },
    {
        name: 'productName',
        label:'存货名称'
    },
])
// 查找
const onSearch = (v) => {
    pageNum.value = 1
    querySelectProduct(v)
}
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 每页显示条目个数
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'warehouseName',
        label: '仓库名称',
        colorClassName: 'activeColor'
    },
    {
        prop: 'productsType',
        label: '产品编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'productName',
        label: '存货名称'
    },
    {
        prop: 'specs',
        label: '规格型号'
    },
    {
        prop: 'unit',
        label: '单位'
    },
    {
        prop: 'preparedReserves',
        label: '预存数量'
    },
    {
        prop: 'price',
        label: '单价'
    },
    {
        prop: 'totalPrice',
        label: '总金额'
    },
    {
        prop: 'restNumber',
        label: '剩余数量',
        colorClassName: 'activeColor'
    },
    {
        prop: 'suppliersName',
        label: '供应商名称',
        colorClassName: 'activeColor'
    },
    {
        prop: 'stockroomNumber',
        label: '预警',
    },
])
// 表格数据内容
let inventoryTableData = ref([
    
])

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit

    let params = inventoryForm.value
    querySelectProduct(params)
}
// 当前页面位置发生变化
const updatePage = (v) => { 
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}
// 查询库存预警接口
const querySelectProduct = async (data={}) => {
    let page = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(data,page)
    let res = await querySelectWarningApi(params)
    let { code, rows ,total} = res
    try {
        if (code == 200) {
            inventoryTableData.value = rows
            totals.value = total
        }
    } catch {

    }
}
onMounted(() => {
    querySelectProduct()
})
</script>
<style scoped lang='scss'>
.inventoryAlerts-box {
    padding: 16px;
}
</style>
